<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="StyleSheet" href="../css/jpetstore.css" type="text/css" media="screen"/>
</head>
<body>
<!--顶部-->
    <div th:replace="common/top">
<!--中间-->
    </div>
        <div id="Content">
            <div id="Welcome">
                <div id="WelcomeContent">
                    Welcome to MyPetStore!
                </div>
            </div>

            <div id="Main">
                <div id="Sidebar">
                    <div id="SidebarContent">
                        <a href="viewCategory?categoryId=FISH"><img src="../images/fish_icon.gif" /></a>
                        <br/> Saltwater, Freshwater <br/>
                        <a href="viewCategory?categoryId=DOGS"><img src="../images/dogs_icon.gif" /></a>
                        <br /> Various Breeds <br />
                        <a href="viewCategory?categoryId=CATS"><img src="../images/cats_icon.gif" /></a>
                        <br /> Various Breeds, Exotic Varieties <br />
                        <a href="viewCategory?categoryId=REPTILES"><img src="../images/reptiles_icon.gif" /></a>
                        <br /> Lizards, Turtles, Snakes <br />
                        <a href="viewCategory?categoryId=BIRDS"><img src="../images/birds_icon.gif" /></a>
                        <br /> Exotic Varieties
                    </div>
                </div>

                <div id="MainImage">
                    <div id="MainImageContent">
                        <map name="estoremap">
                            <area class="animal" alt="Birds" coords="72,2,280,250" href="/catalog/viewCategory?categoryId=BIRDS" shape="rect" />
                            <area class="animal" alt="Fish" coords="2,180,72,250" href="/catalog/viewCategory?categoryId=FISH" shape="rect" />
                            <area class="animal" alt="Dogs" coords="60,250,130,320" href="/catalog/viewCategory?categoryId=DOGS" shape="rect" />
                            <area class="animal" alt="Reptiles" coords="140,270,210,340" href="/catalog/viewCategory?categoryId=REPTILES" shape="rect" />
                            <area class="animal" alt="Cats" coords="225,240,295,310" href="/catalog/viewCategory?categoryId=CATS" shape="rect" />
                            <area class="animal" alt="Birds" coords="280,180,350,250" href="/catalog/viewCategory?categoryId=BIRDS" shape="rect" />
                        </map>
                        <img height="355" src="../images/splash.gif" align="middle" usemap="#estoremap" width="350" />
                    </div>
                    <div id="context2" style="background-color:white;
                                          border: 1px solid rgba(0,0,0,0.5);
                                          background-color: rgba(250,246,246,0.5);
                                          width:250px;
                                          position: fixed;
                                          top: 80px;
                                          left:1195px;
                                          display:none"></div>
                </div>
                <div id="Separator">&nbsp;</div>
            </div>
        </div>
<!--底部-->
    <div th:replace="common/bottom">

    </div>

</html>